var bannerImgDiv = document.getElementsByClassName('banner-img')[0],
  bannerTitleDiv = document.getElementsByClassName('banner-title')[0]

/**
 * tab栏切换
 * @param {*} index 
 * @param {*} menuEl 
 * @param {*} contEl 
 * @param {*} activeClassName 
 * @param {*} changAtt 
 */
function tab (index, menuEl, contEl, activeClassName, changAtt) {
  var value = -index * 100 + '%',
    before = menuEl.getElementsByClassName(activeClassName)[0]
  contEl.style[changAtt] = value
  before.className = ''
  menuEl.children[index].className = activeClassName
}

bannerTitleDiv.onmouseover = function (e) {
  var children = Array.from(bannerTitleDiv.children),
    index = children.indexOf(e.target)
  currentIndex = index
  tab(index, bannerTitleDiv, bannerImgDiv, 'active', 'marginLeft')
}

var currentIndex = 0,
  timer = null
function start () {
  timer && stop()
  timer = setInterval(function () {
    var len = bannerImgDiv.children.length - 1
    currentIndex++
    if (currentIndex > len) {
      currentIndex = 0
    }
    tab(currentIndex, bannerTitleDiv, bannerImgDiv, 'active', 'marginLeft')
  }, 3000)
}
start()

function stop () {
  clearInterval(timer)
}

bannerImgDiv.onmouseover = function () {
  stop()
}

bannerImgDiv.onmouseout = function () {
  start()
}